<template>
    <div id="app">
    <div style="margin-left: 0px;">
        <el-date-picker
                v-model="yearMonth"
                type="month"
                @change="changeMonth"
                placeholder="选择月">
        </el-date-picker>
    </div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>

<script>
export default {
  data() {//date数据
            return {
                yearMonth:'',
                xdata:[],//定义x轴数据集合
                ydataAddCount:[], //y轴添加日志数据
                ydataUpdateCount:[], //y轴添加日志数据
                ydataDelCount:[], //y轴添加日志数据
            }
        },
        created: function () { //初始化方法 类似于jquery  $({})
            //给当前日期选择框初始化日期为当前月
            let date = new Date();
            this.yearMonth=date.getFullYear()+'-'+((date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1));
            //在初始化时，调用加载数据方法
            this.loadData();
        },
        methods: { //使用的所有方法
            //封装加载数据的方法   初始化和年月发生改变时，都可以调用
            loadData(){
                //使用axios发请求到后台方法
                var _this = this;
                //赋值 axios官网代码
                _this.$http
                .get('/operLog/showEchartsByOperLog?monthDay='+this.yearMonth)  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //判断返回值是否正确
                        if(response.data.code==200){
                            //当加载数据方法请求正确时，执行echarts显示
                            //给图片中的数据动态赋值
                            let jsonDataList  = response.data.data;
                            //因为有缓存，每次重新执行后，都要把原来数据清空
                             _this.xdata=[];
                            _this.ydataAddCount=[];
                            _this.ydataUpdateCount=[];
                            _this.ydataDelCount=[];
                            // jsonDataList = [{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3},{"monthDay":"05-02","addCount":1,"updateCount":2,"delCount":1},{"monthDay":"05-03","addCount":0,"updateCount":2,"delCount":1},{"monthDay":"05-04","addCount":1,"updateCount":0,"delCount":0}]
                            for (let i = 0; i < jsonDataList.length; i++) {
                                //拿出循环的每个对象给jsonDataListElement
                                const jsonDataListElement = jsonDataList[i];//第1次：{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3} 。。。
                                //给xdata  ydata ...赋值
                                _this.xdata.push(jsonDataListElement.monthDay);
                                _this.ydataAddCount.push(jsonDataListElement.addCount);
                                _this.ydataUpdateCount.push(jsonDataListElement.updateCount);
                                _this.ydataDelCount.push(jsonDataListElement.delCount);
                            }
                            //显示图表
                            _this.drawChart();
                        }

                    })
            },
            //年月发生变化时的方法
            changeMonth(v) {
                // alert(v);
                let year = v.getFullYear();
                let month = v.getMonth()+1;
                this.yearMonth = year+'-'+(month<10?('0'+month):month);
                // alert(this.yearMonth);
                //月发生变化时，给yearMonth重新赋值后，再次执行加载数据方法
                this.loadData();
            },
            //显示图表方法
            drawChart() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '日志操作统计',
                        subtext: 'Fake Data'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['添加操作', '更新操作', '删除操作']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            // prettier-ignore
                            data: this.xdata
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '添加操作',
                            type: 'line',
                            data:  this.ydataAddCount,
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        },
                        {
                            name: '更新操作',
                            type: 'line',
                            data: this.ydataUpdateCount,
                            markPoint: {
                                data: [
                                    { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                                    { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        },
                        {
                            name: '删除操作',
                            type: 'line',
                            data: this.ydataDelCount,
                            markPoint: {
                                data: [
                                    { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                                    { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        }

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
};
</script>